<template>
  <UseDark v-slot="{ isDark, switchMode }">
    <!-- 左侧部分 -->
    <div ref="container" class="drag-size-container">
      <div
        :class="[
          'box',
          'leftBox',
          {
            dark: isDark,
            light: !isDark
          }
        ]"
        ref="leftBox"
        :style="{ width: box1Width + 'px' }"
      >
        <slot :isDark="isDark" :switchMode="switchMode" name="leftBox"></slot>
      </div>
      <!-- 拖拽分割线 -->
      <div
        :class="[
          'drag',
          {
            dark: isDark,
            light: !isDark
          }
        ]"
        ref="drag"
        @mousedown="startDrag"
      ></div>
      <!-- 右侧部分 -->
      <div
        :class="[
          'box',
          'rightBox',
          {
            dark: isDark,
            light: !isDark
          }
        ]"
        ref="rightBox"
        :style="{ width: box2Width + 'px' }"
      >
        <slot :isDark="isDark" :switchMode="switchMode" name="rightBox"></slot>
      </div>
    </div>
  </UseDark>
</template>

<script lang="ts">
export default {
  name: 'drag-size'
}
</script>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import type { ComponentInternalInstance, ComponentPublicInstance } from 'vue'
import UseDark from '@/apps/dark/UseDark.vue'

const props = defineProps<{
  widthRatio: string
  theme?: {
    dark: {
      color: string
      bgColor: string
    }
    light: {
      color: string
      bgColor: string
    }
  }
}>()

const that = getCurrentInstance() as ComponentInternalInstance

const [rate1, rate2] = props.widthRatio.split(':').map((value: string) => {
  return parseInt(value, 10)
})

const containerWidth = ref(0)
const box1Width = ref(0)
const box2Width = ref(0)
const dragStartX = ref(0)
const dragStartWidth = ref(0)

const startDrag = () => {
  document.addEventListener('mousemove', dragging)
  document.addEventListener('mouseup', stopDrag)
}

const dragging = (e: MouseEvent) => {
  const dragDistance = e.clientX - dragStartX.value
  box1Width.value = dragStartWidth.value + dragDistance
  box2Width.value = containerWidth.value - box1Width.value
}

const stopDrag = () => {
  document.removeEventListener('mousemove', dragging)
  document.removeEventListener('mouseup', stopDrag)
}

onMounted(() => {
  const containerRef = that.refs.container as HTMLElement
  containerWidth.value = containerRef.clientWidth
  const unit = rate1 + rate2
  const unitWidth = containerWidth.value / unit
  box1Width.value = unitWidth * rate1
  box2Width.value = unitWidth * rate2

  containerRef.addEventListener('resize', () => {
    containerWidth.value = containerRef.clientWidth
    box2Width.value = containerWidth.value - box1Width.value
  })

  window.addEventListener('resize', () => {
    containerWidth.value = containerRef.clientWidth
    box2Width.value = containerWidth.value - box1Width.value
  })

  // $emitter
  // const proxy = that.proxy as ComponentPublicInstance as any;
  // console.log('proxy =',proxy);
  // console.log('proxy.$emitter =',proxy.$emitter);
}, that)
</script>

<style scoped lang="scss">
.drag-size-container {
  display: flex;
  height: 100%;
  width: 100% !important;

  .box {
    margin: 0;
    padding: 0;
  }
  .leftBox {
    height: 100%;
    min-width: 52px;
    &.dark {
      background-color: #252526;
    }
    &.light {
      background-color: #c3c3c3;
    }
  }

  .rightBox {
    height: 100%;
    min-width: 320px;
    &.dark {
      background-color: #1e1e1e;
    }
    &.light {
      background-color: #ffffff;
    }
  }

  .drag {
    width: 1px;
    height: 100%;
    cursor: ew-resize;
    &.dark {
      background-color: #252526;
    }
    &.light {
      background-color: #c3c3c3;
    }
    &:hover {
      cursor: ew-resize;
      width: 3px;
      background-color: #0078d7 !important;
    }
  }
}
</style>
